<template>
	<view class="wrapper">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<uni-nav-bar title="个人信息" right-text="退出" @clickRight="logout()" />
		<view>
			<view class="top">
				<view class="center">
					<view class="center_top">
						<view class="center_img">
							<!-- 这里可以放自己的静态头像 -->
							<!-- #ifndef MP-WEIXIN -->
							<image src="@/static/tx.jpg"></image>
							<!-- #endif -->
							<!-- <open-data type="userAvatarUrl" class="user_head"></open-data> -->
						</view>
						
							<view class="center_info" @click="banji">
								<view class="center_name">
									<!-- 这里可以放自己的名称图片 -->
									<!-- #ifndef MP-WEIXIN -->
									<view><text style="font-size: 20px;">{{this.sjName}}</text></view>
									<!-- #endif -->
									<!-- <open-data class="nickname" type="userNickName"></open-data> -->
								</view>
								<view class="center_vip">
									<image class="rank_icon" src="@/static/logo.png"
										style="width: 20px;height: 20px;" />
									<view class="vip_text" style="margin-left: 30px;">
										<text v-if="this.sjStatu==1">已实名</text>
										<text v-if="this.sjStatu==2">未实名</text>
									</view>
								</view>
							</view>
						
						<view style="margin-left: 10px;margin-top: 16px;">
							<image src="../../static/erweima.png" style="width: 40px;height: 40px;" @click="fenxiang()">
							</image>
						</view>
					</view>
				</view>
				<image src='@/static/waterflow.gif' mode='scaleToFill' class='gif-wave'></image>
			</view>
		</view>
		<!-- 余额 -->
		<view class="count">
			<view class="cell">
				<view><text
						style="font-size: 35px;font-family: 'Courier New', Courier, monospace;color: black;">余额</text>
				</view>
				<navigator url="../tixian/tixian">
					<view style="font-size: 35px;font-family: 'Courier New', Courier, monospace;padding-left: 80px;">
						<text>{{this.sjBalance/100}}</text>
					</view>
				</navigator>
			</view>
		</view>
		<!-- 其它 -->
		<scroll-view scroll-y="true" style="width: 100%;height: 530px;">
			<view v-for="order in orderlist">
				<uni-card title="销售订单" :extra=order.sjSy @click="dingdanxq(order.order)">
					<text class="uni-body">订单号：{{order.order}}</text>
					<div>日期：{{order.createData}}</div>
					<div>用户：{{order.userName}}</div>
				</uni-card>
			</view>
		</scroll-view>
	</view>

</template>

<script>
	// 引入vuex
	import {
		mapState
	} from 'vuex';
	import {
		request
	} from '@/network/http.js'

	export default {
		data() {
			return {
				sjId:"",
				sjName: "",
				sjBalance: 0,
				sjStatu: "",
				token: '',
				image: '',
				orderlist: [

				]
			}
		},
		// 得到属性userInfo
		computed: {
			...mapState(['userInfo'])
		},
		// created() {
		// 	this.selectImageUrl()
		// },
		onShow() {
			this.token = uni.getStorageSync("refreshToken")
			request({
				url: 'driver/ssmsj/seachone',
				method: 'POST',
				data: {
					refreshToken: this.token
				}
			}).then(res => {
				// console.log(res.data)
				this.sjName = res.data.ssmSj.sjName
				this.sjStatu = res.data.ssmSj.sjState
				this.sjBalance = res.data.ssmSj.sjBalance
				this.sjId=res.data.ssmSj.sjId
				console.log(this.sjStatu==1)
			})
			
			request({
				url: `driver/ssmsj/getsoorder/${this.token}`,
				method: 'POST',

			}).then(res => {
				this.orderlist = res.data.orderList

			})


		},
		methods: {
			logout() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			tixian() {
				uni.navigateTo({
					url: "/pages/tixian/tixian"
				})
				console.log('11')
			},
			fenxiang() {
				uni.navigateTo({
					url: "/pages/fenxiang/fenxiang"
				})
			},
			dingdanxq(order) {
				uni.navigateTo({
					url: `/pages/xfdingdan/xfdingdan?id=${order}`,

				})
			},
			banding() {
				uni.navigateTo({
					url: "/pages/shebei/shebei"
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			banji(){
				uni.navigateTo({
					url:`/pages/bianji/bianji?sjId=${this.sjId}`
				})
			},

			gotoFeeds(url) {
				// 可以跳多级目录
				uni.navigateTo({
					url
				})

			}
		}
	};
</script>

<style lang="scss">
	Page {
		font-size: 14px;
	}

	.top {
		width: 100%;
		height: 130px;
		background: #23EBB9;
		padding-top: 15px;
		position: relative;
	}

	.center {
		width: 95%;
		height: 100px;
		background: white;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		border-radius: 5px;
	}

	.center_top {
		display: flex;
		flex-direction: row;
		width: 80%;
		height: 80px;
		margin: 0 auto;
		margin-top: 20rpx;
		border-bottom: 1px solid #EEEEEE;
	}

	.center_img {
		width: 66px;
		height: 66px;
		border-radius: 50%;
		overflow: hidden;
	}

	.center_img image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.center_img .user_head {
		width: 100%;
		height: 100%;
	}

	.center_info {
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		margin-left: 30px;
	}

	.center_name {
		font-size: 20px;
	}

	.center_phone {
		color: #BEBEBE;
	}

	// .center_down {
	// 	display: flex;
	// 	flex-direction: row;
	// 	width: 80%;
	// 	height: 35px;
	// 	margin: 0 auto;
	// 	margin-top: 20rpx;
	// }

	.center_rank {
		width: 50%;
		height: 35px;
		display: flex;
		flex-direction: row;
	}

	.rank_text {
		height: 35px;
		line-height: 35px;
		margin-left: 10rpx;
		color: #AAAAAA;
	}

	.rank_icon {
		width: 19px;
		height: 19px;
	}

	.center_vip image {
		width: 25px;
		height: 25px;
		margin-top: 15rpx;
	}

	.vip_icon {
		width: 25px;
		height: 25px;
		margin-top: -10rpx;
	}

	.vip_text {
		margin-top: -55rpx;
		margin-left: 50rpx;
		color: #AAAAAA;
	}

	.center_rank image {
		width: 35px;
		height: 35px;
	}

	.center_score {
		width: 50%;
		height: 35px;
		display: flex;
		flex-direction: row;
	}

	.center_score image {
		width: 35px;
		height: 35px;
	}

	.gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	.wrapper {
		position: absolute;
		top: 0;
		bottom: 0;

		width: 100%;
		background-color: #F4F4F4;
	}

	.profile {
		height: 375rpx;
		background-color: #ea4451;
		display: flex;
		justify-content: center;
		align-items: center;

		.meta {
			.avatar {
				display: block;
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				border: 2rpx solid #fff;
				overflow: hidden;
			}

			.nickname {
				display: block;
				text-align: center;
				margin-top: 20rpx;
				font-size: 30rpx;
				color: #fff;
			}
		}
	}

	.count {
		display: flex;
		flex-direction: row;
		margin: 0 20rpx;
		height: 120rpx;
		text-align: center;
		border-radius: 4rpx;
		background-color: #fff;
		top: 10rpx;
		margin-top: 10px;

		.cell {
			display: flex;
			justify-content: space-around;
			flex-direction: row;
			margin-top: 10px;
		}
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>
